// BEM
// -----------------------------
@mixin e($element) {
	&__#{$element} {
		@content;
	}
}

@mixin m($modifier) {
	&--#{$modifier} {
		@content;
	}
}

// Flexbox
// -----------------------------
@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flex($n) {
    -webkit-box-flex: $n;
    -moz-box-flex: $n;
    -webkit-flex: $n;
    -ms-flex: $n;
    flex: $n;
}

@mixin order($val) {
    -webkit-box-ordinal-group: $val;  
    -moz-box-ordinal-group: $val;     
    -ms-flex-order: $val;     
    -webkit-order: $val;  
    order: $val;
}

@mixin flex-wrap($fw) {
    @if $fw == nowrap {
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    } @else if $fw == wrap {
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    } @else {
        -webkit-flex-wrap: $fw;
        -ms-flex-wrap: $fw;
        flex-wrap: $fw;
    }
    
}

@mixin flex-shrink($fs) {
    -webkit-flex-shrink: $fs;
    -ms-flex: 0 $fs auto;
    flex-shrink: $fs;
}

@mixin justify-content($jc) {
    @if $jc == flex-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    } @else if $jc == flex-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    } @else if $jc == space-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    } @else {
        -webkit-box-pack: $jc;
        -ms-flex-pack: $jc;
        -webkit-justify-content: $jc;
        justify-content: $jc;
    }
}

@mixin align-items($ai) {
    @if $ai == flex-start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    } @else if $ai == flex-end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    } @else {
        -webkit-box-align: $ai;
        -ms-flex-align: $ai;
        -webkit-align-items: $ai;
        align-items: $ai;
    }
}

@mixin align-content($ac) {
    -ms-flex-linke-pack: $ac;
    -webkit-align-content: $ac;
    align-content: $ac;
}

@mixin align-self($as) {
    -ms-flex-item-align: $as;
    -webkit-align-self: $as;
    align-self: $as;
}

// Transition
// -----------------------------
@mixin transition($d) {
    -webkit-transition-duration: $d;
    transition-duration: $d;
}

@mixin transform($t) {
    -webkit-transform: $t;
    transform: $t;
}
@mixin transform-origin($to) {
    -webkit-transform-origin: $to;
    transform-origin: $to;   
}
@mixin translate3d($x:0, $y:0, $z:0) {
    -webkit-transform: translate3d($x,$y,$z);
    transform: translate3d($x,$y,$z);
}

// Utilities
// -----------------------------
@mixin clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@mixin fullbg() {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
@mixin oneline() {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}